<template>
    <div class="box">
        <h3>小黑自动售货机</h3>
        <button @click = "buy(5)">可乐5元</button>
        <button @click = "buy(8)">牛奶8元</button>
        <button @click = "buy(10)">橙汁10元</button>
        <p>余额：{{ money }}元</p>
    </div>
    
</template>
<script setup>
    import {ref} from 'vue';
            const money = ref(100);
            function buy(price){
                money.value -= price;
            }
            
</script>
<style scoped>
.box{
    padding: 16px;
    border: 1px solid #ccc;
    margin-bottom: 16px;
}
</style>